<script setup lang='ts' name="protocol-management">
import { useGetSupplierOrderPage, useGetSupplierOrderStatistics } from '@fl/api/supplier'
import { SearchForm } from '@fl/components'
import { cloneDeep } from 'lodash-es'

import { useForm } from '../hooks/use-form'
import AcceptanceInfo from './acceptance-info.vue'
import ApprovalAcceptance from './approval-acceptance.vue'
import ListItem from './list.vue'
import SendGoods from './send-goods.vue'

const props = withDefaults(defineProps<{
    queryType: string
}>(), {})
const { queryType } = toRefs(props)

const { form, initialState, schema } = useForm()
const pageInfo = ref<any>({
    page: 1,
    size: 10,
    total: 0,
})

const sendRef = ref()
const approvalRef = ref()
const infoRef = ref()
const detail = ref<any>({})

const tabs = ref<any>([])
const active = ref()
const showSendGoods = ref(false)
const showApprovalAcceptance = ref(false)
const showAcceptanceInfo = ref(false)

const queryConditions = ref({})

const getSupplierOrderPageParams = computed(() => ({
    ...queryConditions.value,
    orderStatus: unref(active),
    orderTime: '',
    orderTimeEnd: queryConditions.value?.orderTime?.[1],
    orderTimeStart: queryConditions.value?.orderTime?.[0],
    page: pageInfo.value.page,
    queryType: queryType.value,
    size: pageInfo.value.size,
}))

const { data: supplierOrderPageData, isLoading: isGetSupplierOrderPageLoading } = useGetSupplierOrderPage(getSupplierOrderPageParams)

const statisticsParams = computed(() => {
    return {
        ...queryConditions.value,
        orderTime: '',
        orderTimeEnd: queryConditions.value?.orderTime?.[1],
        orderTimeStart: queryConditions.value?.orderTime?.[0],
        queryType: queryType.value,
    }
})

const { data: statisticData, isLoading: statisticLoading } = useGetSupplierOrderStatistics(statisticsParams)

const loading = computed(() => statisticLoading.value || isGetSupplierOrderPageLoading.value)

const dataList = ref([])
function change(val: any) {
    console.log('🚀 ~ val:', val)
}

function submit() {
    queryConditions.value = cloneDeep(form.value)
}

function reset() {
    form.value = cloneDeep(initialState)
    queryConditions.value = cloneDeep(form.value)
}
function pageChange(val: any) {
    pageInfo.value = Object.assign(pageInfo.value, val)
}
watchEffect(() => {
    if (supplierOrderPageData.value) {
        dataList.value = cloneDeep(supplierOrderPageData.value?.records ?? [])
        dataList.value.forEach((item: any) => {
            item.expand = true
        })
        pageInfo.value.total = supplierOrderPageData.value?.total ?? 0
    }
})

watchEffect(() => {
    if (statisticData.value) {
        // console.log(statisticData.value)
        tabs.value = cloneDeep(statisticData.value).sort((a, b) => a.orderStatus - b.orderStatus)
        tabs.value.unshift({
            count: 0,
            orderStatus: '',
            statusName: '全部',
        })
        active.value = tabs.value[0].orderStatus
    }
})
</script>

<template>
    <el-card mb-20
             class="-mt-32"
    >
        <SearchForm v-model="form"
                    :columns="schema"
                    submit-text="查询"
                    @submit="submit"
                    @reset="reset"
        />
    </el-card>

    <el-card mb-20>
        <el-tabs v-model="active"
                 @tab-change="change"
        >
            <el-tab-pane v-for="item in tabs"
                         :key="item.orderStatus"
                         :name="item.orderStatus"
                         :label="item.statusName"
            >
                <template #label>
                    <el-badge v-if="item.count"
                              :value="item.count"
                              :max="99"
                              :min="1"
                    >
                        {{ item.statusName }}
                    </el-badge>

                    <span v-else>{{ item.statusName }}</span>
                </template>
            </el-tab-pane>
        </el-tabs>

        <div class="mb-20" />

        <ListItem :data="dataList"
                  :total="pageInfo.total"
                  :loading="loading"
                  @page-change="pageChange"
        />
    </el-card>

    <SendGoods ref="sendRef"
               v-model="showSendGoods"
               :data="detail"
    />

    <ApprovalAcceptance ref="approvalRef"
                        v-model="showApprovalAcceptance"
                        :data="detail"
    />

    <AcceptanceInfo ref="infoRef"
                    v-model="showAcceptanceInfo"
                    :data="detail"
    />
</template>

<style lang="less" scoped>
:deep(.el-badge__content) {
    background: #da0004;
    transform: translateY(-50%) translateX(135%);
}
</style>
